<template>
  <div style="height: 90%">
    <ta-layout-header :style="{ background: '#fff', padding: 0 }">
      <ta-breadcrumb style="margin: 1rem 0">
        <ta-breadcrumb-item>
          <router-link to="/personManage">
            <span class="title">员工列表</span> 
          </router-link>
        </ta-breadcrumb-item>
        <ta-breadcrumb-item>
          <span class="title">添加新员工</span> 
        </ta-breadcrumb-item>
      </ta-breadcrumb>
    </ta-layout-header>
    <ta-layout-content :style="{ margin: '1.5rem 1rem 0', height: '85%' }">
      <ta-row :style="{ background: '#fff', padding: '24px', height: '100%' }">
        <ta-col :span="12">
          <ta-form :autoFormCreate="(form)=>{this.form = form}" class="personform">
            <ta-form-item
              label='员工姓名'
              :labelCol="{span: 3}"
              :wrapperCol="{span: 6}"
              fieldDecoratorId="name"
              :require="{message:'姓名不能为空!'}"
              :fieldDecoratorOptions="{validateTrigger: ['blur']}"
              :hasFeedback="true"
            >
              <ta-input placeholder='请输入员工姓名' size="large"/>
            </ta-form-item>

            <ta-form-item
              label='员工性别'
              :labelCol="{span: 3}"
              :wrapperCol="{span: 6}"
              fieldDecoratorId="sex"
            >
              <ta-radio-group name="sex" :defaultValue="0">
                <ta-radio :value="0">女</ta-radio>
                <ta-radio :value="1" >男</ta-radio>
              </ta-radio-group>
            </ta-form-item>

            <ta-form-item
              label='员工年龄'
              :labelCol="{span: 3}"
              :wrapperCol="{span: 6}"
              fieldDecoratorId="age"
              :fieldDecoratorOptions="{rules: [{validator: ageValid},{ required: true, message: '年龄不能为空！' }]}"
              :hasFeedback="true"
            >
              <ta-input-number placeholder="年龄" size="large"/>
            </ta-form-item>

            <ta-form-item
              label='员工编号'
              :labelCol="{span: 3}"
              :wrapperCol="{span: 6}"
              fieldDecoratorId="employeeId"
              :require="{message:'编号不能为空!'}"
              :fieldDecoratorOptions="{rules: [{validateTrigger: ['blur'], pattern: /^[0-9]*$/, message: '只能是数字！'},
                {validateTrigger: ['blur'], len: 10, message: '长度必须为10！'}]}"
              :hasFeedback="true"
            >
              <ta-input placeholder="员工编号" size="large"/>
            </ta-form-item>
            <ta-row>
              <ta-col :span="12">
                <ta-form-item
                  label='员工籍贯'
                  :labelCol="{span: 6}"
                  :wrapperCol="{span: 16}"
                  fieldDecoratorId="nativePlace"
                  :fieldDecoratorOptions="{rules: [{validator: nativeValid}]}"
                  :hasFeedback="true"
                >
                  <ta-cascader :options="nativeOptions" :showSearch="{filter}" placeholder="选择籍贯" size="large" />
                </ta-form-item>
              </ta-col>
              <ta-col :span="12">
                <ta-form-item
                  label='现居地址'
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18}"
                  fieldDecoratorId="residence"
                  :fieldDecoratorOptions="{rules: [{validator: residenceValid}]}"
                  :hasFeedback="true"
                >
                  <ta-cascader :options="residenceOptions" :showSearch="{filter}" placeholder="选择地址区域" size="large" />
                </ta-form-item>
              </ta-col>
            </ta-row>

            <ta-form-item
              label="详细地址"
              :labelCol="{span: 3}"
              :wrapperCol="{span: 20}"
              fieldDecoratorId="address"
              :require="true"
              :fieldDecoratorOptions="{validateTrigger: ['blur']}"
              :hasFeedback="true"
            >
              <ta-input placeholder="输入详细地址" size="large"/>
            </ta-form-item>
            <ta-row>
              <ta-col :span="8">
                <ta-form-item
                  label="手机号码"
                  :labelCol="{span: 9}"
                  :wrapperCol="{span: 14}"
                  fieldDecoratorId="phoneNum"
                  :require="{message:'请输入手机号码'}"
                  :fieldDecoratorOptions="{rules: [{phone: 'mobile', message: '请输入正确的电话号码' }]}"
                  :hasFeedback="true"
                >
                  <ta-input placeholder="电话号码" size="large"/>
                </ta-form-item>
              </ta-col>
              <ta-col :span="8">
                <ta-form-item
                  label="身份证"
                  :labelCol="{span: 9}"
                  :wrapperCol="{span: 14}"
                  fieldDecoratorId="idCard"
                  :require="{message:'请输入身份证号码'}"
                  :fieldDecoratorOptions="{rules: [{idCard: '2', message: '请输入正确的身份证号码' }]}"
                  :hasFeedback="true"
                >
                  <ta-input placeholder="身份证号码" size="large"/>
                </ta-form-item>
              </ta-col>
              <ta-col :span="8">
                <ta-form-item
                  label="银行卡号"
                  :labelCol="{span: 9}"
                  :wrapperCol="{span: 14}"
                  fieldDecoratorId="bankCard"
                  :require="{message:'请输入银行卡号'}"
                  :fieldDecoratorOptions="{rules: [{validator: bankCardValid}]}"
                  :hasFeedback="true"
                >
                  <ta-input placeholder="银行卡号" size="large"/>
                </ta-form-item>
              </ta-col>
            </ta-row>
            
            <ta-form-item
              label="入职日期"
              :labelCol="{span: 3}"
              :wrapperCol="{span: 6}"
              fieldDecoratorId="entryDate"
              :require="true"
              :fieldDecoratorOptions="{validateTirgger: ['blur']}"
              :hasFeedback="true"
            >
              <ta-date-picker 
                placeholder="入职日期" 
                size="large"
                :format="'YYYY-MM-DD'"
              ></ta-date-picker>
            </ta-form-item>

            <ta-row>
              <ta-col :span="14">
                <ta-form-item
                  label="所属部门"
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18}"
                  fieldDecoratorId="branch"
                  :require="true"
                  :fieldDecoratorOptions="{validateTirgger: ['blur']}"
                  :hasFeedback="true"
                >
                  <ta-cascader
                    placeholder="选择部门" 
                    size="large"
                    :options="branchOption"
                  ></ta-cascader>
                </ta-form-item>
              </ta-col>
              <ta-col :span="10">
                <ta-form-item
                  label="员工等级"
                  :labelCol="{span: 6}"
                  :wrapperCol="{span: 18}"
                  fieldDecoratorId="grade"
                  :require="true"
                  :fieldDecoratorOptions="{validateTirgger: ['blur']}"
                  :hasFeedback="true"
                >
                  <ta-select
                    placeholder="选择等级" 
                    size="large"
                    :options="gradeOption"
                  ></ta-select>
                </ta-form-item>
              </ta-col>
            </ta-row>

            <ta-form-item label="" :wrapperCol="{ span: 18, offset: 3 }">
              <ta-button type='primary' size="large" @click="submitForm">提交</ta-button>
            </ta-form-item>
          </ta-form>
        </ta-col>
      </ta-row>
    </ta-layout-content>
  </div>
</template>

<script>
export default {
  name: 'create',
  data () {
    return {
      nativeOptions: [{
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [{
          value: 'hangzhou',
          label: 'Hangzhou'
        }],
      }, {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [{
          value: 'nanjing',
          label: 'Nanjing'
        }],
      }],
      residenceOptions: [
        {
          value: 'sichuan',
          label: '四川省',
          children: [
            {
              value: 'chengdu',
              label: '成都市',
              children: [
                {
                  value: 'tianfuxinqu',
                  label: '天府新区'
                },
                {
                  value: 'jinjiang',
                  label: '锦江区'
                },
                {
                  value: 'wuhou',
                  label: '武侯区'
                }
              ]
            },
            {
              value: 'ziyang',
              label: '资阳市',
              children: [
                {
                  value: 'yanjiangqu',
                  label: '雁江区'
                },
                {
                  value: 'anyue',
                  label: '安岳县'
                },
                {
                  value: 'lezhi',
                  label: '乐至县'
                }
              ]
            }
          ]
        }
      ],
      branchOption: [
        {
          value: 'yb',
          label: '医保行业部',
          children: [
            {
              value: 'kf',
              label: '控费产品部',
              children: [
                {
                  value: 'kaifa',
                  label: '开发组'
                }
              ]
            }
          ]
        }
      ],
      gradeOption: [
        {
          value: 'F',
          label: '实习员工',
          name: 'sx'
        },
        {
          value: 'E',
          label: '初级员工',
          name: 'cj'
        },
        {
          value: 'D',
          label: '中级员工',
          name: 'zj'
        },
        {
          value: 'C',
          label: '高级员工',
          name: 'gj'
        },
        {
          value: 'B',
          label: '项目经理',
          name: 'jl'
        },
        {
          value: 'A',
          label: '公司顶层领导',
          name: 'ld'
        }
      ]
    }
  },
  mounted () {
  },
  created () {
  },
  methods: {
    submitForm () {
      console.log(this.form.getFieldsValue())
      let formData = this.form.getFieldsValue()
      this.Base.submit(
        this.form, {
          url: '',
          data: formData,
          autoValid: true
        },
        {
          // 成功回调
          successCallback: (data) => {
            console.log(data)
          },
          // 失败回调
          failCallback: (data) => {
            console.log(data)
          }
        }
      )
    },
    filter(inputValue, path) {
      return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1))
    },
    nativeValid (rule, value, callback) {
      let nativeData = value
      if (!nativeData || nativeData.length == 0) {
        callback('必须选择籍贯！')
      } else {
        callback()
      }
    },
    ageValid (rule, value, callback) {
      let age = value;
      if (age < 18) {
        callback('员工年龄必须大于等于18岁！')
      } else {
        callback()
      }
    },
    residenceValid (rule, value, callback) {
      let residenceData = value
      if (!residenceData || residenceData.length == 0) {
        callback('必须选择居住地！')
      } else {
        callback()
      }
    },
    bankCardValid (rule, value, callback) {
      let bankcard = value
      if (isNaN(bankcard)) {
        callback('银行卡号必须都为数字！')
      } else if (value.length != 19) {
        callback('请输入正确的银行卡号')
      } else {
        callback()
      }
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 1.125rem;
  display: inline-block;
  margin: 1rem 2rem;
}
.personform /deep/ .ant-form-item-label label{
  font-size: 1rem
}
</style>